<template>
    <div class="Feature">
        <div v-for="item in high_feature" :key="item.title">
            <p style="line-height: 0.4rem;">
                <span style="font-weight:900; font-size: 0.3rem;vertical-align:0.02rem; color: #C14374; ">|</span>
                <span style="font-size: 0.3rem; margin-left: 0.2rem;">{{item.title}}</span>
            </p>
            <div v-for="i in item.list" :key="i.title">
                <div style="padding: 0.1rem;">
                    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                        <van-swipe-item v-for="e in i.imgs" :key="e">
                            <img :src="e" width="100%" alt="">
                        </van-swipe-item>
                    </van-swipe>
                    <!-- :<img src="" width="100%" alt=""> -->
                </div>
                <span class="label">{{i.label}}</span>
                <p class="title">{{i.title}}</p>
                <p class="content">{{i.content}}</p>
            </div>
            <hr>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        high_feature: [Object, Array],
    },
    created() {
        console.log(this.high_feature);
    },
};
</script>

<style lang="scss" scoped>
.Feature {
    padding: 0 0.18rem;
    .label{
        padding: 0.02rem;
        color: red;
        border: 0.01rem solid red;
    }
    .title{
        font-size: 0.2rem;
        line-height: 0.4rem;
    }
    .content{
        color: grey;
    }
}
</style>